<template>
    <div class="dashboard-editor-container">
      <div style="width: 100%;">
          <el-row :gutter="24">
              <el-col :span="24">
                <el-card shadow="always" style="text-align: center; padding:5px; margin:0px 0 40px 0; font-weight:600; font-size:20px">
                  各平台数据横向对比
                </el-card>
              </el-col>
    
            </el-row>
      </div>
      
  
      <bar-chart :list="carList" chartId="chart1" title='平台车辆数量'></bar-chart>
  
      
  
      <!-- <radar-chart :list="operateList" ></radar-chart> -->
  
      <pie-chart :list="marketShare" title="平台司机分布"></pie-chart>
  
      <bar-chart :list="operateList" chartId="chart1" title='平均乘车费用'></bar-chart>
  
      <multibar-chart :list="priceList"></multibar-chart>
    </div>
  </template>
  
  <script>
  import { list ,remove, carNumList} from "@/api/car";
  import { driverList} from "@/api/driver";
  import { operateList, marketShare } from "@/api/platform";
  import { priceList } from '@/api/price'
  
  import BarChart from './components/bar-chart.vue';
  import RadarChart from './components/radar-chart.vue';
  import PieChart from './components/pie-chart.vue';
  
  import MultibarChart from './components/multibar-chart.vue';
  export default {
    name: "Home",
    components: {
     BarChart,
     RadarChart,
     PieChart,
     MultibarChart,
    },
    data() {
      return {
        // 车辆汇总列表
        carList:[],
        // 运维信息综合对比
        operateList:[],
        // 市场份额
        marketShare:[],
        // 价格列表
        priceList:[]
      };
    },
    created() {
      this.getCarNumList()
      this.getOperateList()
      this.getMarketShare()
      this.getPriceList()
    },
    methods: {
      getCarNumList() {
          carNumList().then(res => {
              console.log('carNumList', res)
              if(res.success){
                  this.carList = res.data
              } else {
                  console.log('carNumList fail' + res.msg)
              }
          })
      },
      getOperateList() {
          operateList().then(res => {
              console.log('operateList', res)
              if(res.success){
                  this.operateList = res.data
              } else {
                  console.log('fail' + res.msg)
              }
          })
      },
      getMarketShare() {
          driverList().then(res => {
              if(res.success){
                  this.marketShare = res.data
              } else {
                  console.log('fail' + res.msg)
              }
          })
      },
      getPriceList() {
          
          priceList().then(res => {
              if(res.success){
                  this.priceList = res.data
              } else {
                  console.log('fail' + res.msg)
              }
          })
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  
  
  </style>
  